<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript" src="<%=path%>/js/jquery-1.8.3.js"></script>	
</head>

<body>
	<center>
		<h1>Register Page.</h1>
		<hr width=80%>
		<form action="<%=path%>/register" method="post">
			<h2>Username:</h2>
			<input type="text" name="username"><br />
			<h2>Password:</h2>
			<input type="password" name="pwd"><br />
			<h2>PhoneNo:</h2>
			<input type="text" id="phone"> 
			<input type="button" id="pBtn" value="Send Message"><br> 
			<img id="captcha" src="<%=path%>/ImageServlet"/><br/>
			<input type="text" id="captcha_no"><br/>
			<input type="button" id="cBtn" value="Validate "><br> 
			<input type="submit" value="Register"><br/>
		</form>
	</center>


	<script>
		$().ready(function(){
			
			$('#cBtn').click(function(){
				var url = '<%=path%>/imageVal.json';	
				var data = {
					captcha_no : $('#captcha').val()
				};					
				$.get(url,data,function(json){
					alert(json.result);
				});
				
			});
			
			
			$('#captcha').click(function(){
				var timestamp = (new Date()).valueOf();
				url = '<%=path%>/ImageServlet?r=' + timestamp;
				$('#captcha').attr("src", url);
			});	
			
			
			$('#pBtn').click(function(){
                                var url = "<%=basePath%>register.json";
                                var data = {
                                        phone : $('#phone').val()
                                };
                                $.get(url,data,function(json){
                                        alert(json.msg);
                                });
                                $('#pBtn').val('reSend');
			});
		});
	</script>
</body>
</html>
